<template>
	<view class="root">
		<view class="header top-0 width-100vw" />
		<view
			:class="[
				`nav-bar fixed width-100vw fd-row jc-center ai-center height-88`,
			]"
		>
			<navigator open-type="navigateBack" class="f1 pl-28">
				<icons
					class="text-left"
					color="#fff"
					type="arrowleft"
					size="24"
				/>
			</navigator>
			<text class="f4 text-center fs-32 color-fff fw-700">下单</text>
			<view class="f1" />
		</view>
		<view class="main">
			<view class="section bgc-fff pt-30 pb-30 pr-24 pl-24">
				<label class="title">
					<image
						class="width-28 height-26"
						src="/static/imgs/icon-station.png"
					/>
					<text class="fs-28 ml-10 f1 fw-700 color-333">{{
						pageData.station.name
					}}</text>
					<text
						v-if="pageData.station.city"
						class="fs-20 city ml-12"
						>{{ pageData.station.city }}</text
					>
					<text
						v-if="pageData.station.metre"
						class="fs-20 range ml-12"
						>{{ pageData.station.metre }}</text
					>
				</label>
				<view class="subject f1 fd-row jc-sb mt-18 ai-center">
					<view>
						<text
							:class="[
								`address fs-22 fw-500 color-8f9aa8 ml-40 mt-12`,
							]"
						>
							{{ pageData.station.address }}
						</text>
						<view class="tel fd-row ml-40 ai-center mt-24">
							<image
								class="width-30 height-30"
								src="/static/imgs/icon-tel.png"
							/>
							<text class="fs-26 color-4388e7 ml-10 fw-700">{{
								pageData.station.mobile
							}}</text>
						</view>
					</view>
					<image
						class="example-station br-8"
						:src="pageData.station.img"
						mode="aspectFill"
					/>
				</view>
			</view>
			<text class="fs-32 fw-700 mt-30 color-333">订单信息</text>
			<view
				class="section bgc-fff mt-30 fs-26 fw-500 color-333 pl-24 pr-24"
			>
				<label class="code-box height-100 ai-center">
					<text class="mr-12">取件码:</text>
					<input
						class="f1 input fs-26"
						v-model="model.code"
						maxlength="50"
						placeholder-class="color-999"
						placeholder="多个取件码请用“，”隔开"
					/>
				</label>
				<label class="contacts height-80 ai-center">
					<text class="mr-12">派送时间:</text>
					<text class="f1 color-999">{{
						`${
							new Date().getHours() > 19 ? "次日" : "今晚"
						} 18:00 - 21:00`
					}}</text>
					<text class="width-42" />
				</label>
				<navigator
					url="/pages/addressManager?pageName=pre-order"
					hover-class="btn-hover"
				>
					<label class="contacts height-80 ai-center">
						<text class="mr-12">联系方式:</text>
						<text class="f1 color-999">{{
							pageData.userinfo.usermobile
						}}</text>
						<text class="width-42" />
					</label>
					<label class="fd-row address height-80 ai-center">
						<text class="mr-12">配送地址:</text>
						<text class="f1 color-999">{{
							pageData.userinfo.address
						}}</text>
						<icons type="arrowright" size="24" color="#999" />
					</label>
				</navigator>
			</view>
			<label class="ai-center mt-30">
				<image
					class="width-26 height-22"
					src="/static/imgs/icon-warning.png"
				/>
				<text class="color-333 ml-10 fw-700 fs-24">温馨提示:</text>
			</label>
			<text class="fs-22 color-8f9aa8 ml-6 mt-20 fw-500">
				请仔细核对取件码，便于准确快速的取得货物。
			</text>
			<view class="section bgc-fff color-333 mt-30 height-400 fw-500">
				<label class="cell th fs-28 height-80 ai-center">
					<text class="f1 text-center">用户</text>
					<text class="f1 text-center">配送</text>
					<text class="f1 text-center">最近</text>
				</label>
				<scroll-view style="overflow: hidden" scroll-y class="f1">
					<label
						v-for="(item, index) in orderHistory.lists"
						:key="index"
						class="cell pt-18 pb-18 ai-center jc-center"
					>
						<text class="f1 fs-28 ai-center">{{
							item.mobile
						}}</text>
						<label class="f1 jc-center fs-24">
							<text class="color-4371ff">{{ item.num }}</text>
							<text class="color-8f9aa8 ml-6">次</text>
						</label>
						<text class="f1 fs-24 ai-center">{{ item.time }}</text>
					</label>
					<load-more
						:showIcon="true"
						:contentText="loadMoreText"
						:status="loadMoreStatus"
						@clickLoadMore="getOederHistory"
					/>
				</scroll-view>
			</view>
		</view>
		<view
			class="step fixed width-100vw height-100 bottom-0 fd-row ai-center"
		>
			<icons
				@click="goBack"
				class="bgc-fff icons jc-center height-100percent ai-center"
				color="#333"
				type="arrowleft"
				size="24"
			/>
			<view
				hover-class="btn-hover"
				@click="placeOrder"
				:class="[
					`f1 comfirm color-fff fs-36 fw-500 height-100percent ai-center jc-center`,
				]"
			>
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	import icons from "@/components/icons";
	import loadMore from "@/components/load-more";

	export default {
		components: { icons, loadMore },
		data: () => ({
			model: { code: "" },
			pageData: {
				userinfo: {},
				station: {},
			},
			orderHistory: { page: 1, lists: [] },
			loadMoreText: {
				contentdown: "点击显示更多",
				contentrefresh: "正在加载...",
				contentnomore: "没有更多了",
			},
			loadMoreStatus: "loading",
		}),
		onLoad({ sid, latitude, longitude }) {
			uni.fetch("/api/home/detail", {
				data: { sid, latitude, longitude },
				success: (res) => (this.pageData = res),
			});
			this.getOederHistory();
			uni.$on(
				"updateAddressInfo",
				({ addressInfo }) => (this.pageData.userinfo = addressInfo)
			);
		},
		onUnload() {
			getApp().globalData.payInfo = {};
			uni.$off("updateAddressInfo");
		},
		methods: {
			goBack: uni.navigateBack,
			getOederHistory() {
				if (!this.orderHistory.page) return;
				this.loadMoreStatus = "loading";
				uni.fetch("/api/order/history", {
					data: {
						sid: this.pageData.station.sid,
						limit: 3,
						page: this.orderHistory.page,
					},
					success: (res) => {
						this.orderHistory.page = res.page;
						this.orderHistory.lists.push(...res.lists);
						this.loadMoreStatus = res.page ? "more" : "noMore";
					},
				});
			},
			placeOrder() {
				//  #ifdef APP-PLUS
				if (this.model.code && this.pageData.userinfo.addressId) {
					uni.fetch("/api/order/add", {
						data: {
							sid: this.pageData.station.sid,
							code: this.model.code,
							addressId: this.pageData.userinfo.addressId,
						},
						success: (res) => {
							getApp().globalData.payInfo = {
								...res,
								...this.pageData,
								...this.model,
							};
							uni.navigateTo({ url: "/pages/pay" });
						},
					});
				} else {
					uni.showToast({
						title: "请检查配送地址或取件码是否填写",
						icon: "none",
					});
				}
				//#endif

				// #ifdef MP-WEIXIN
				uni.showToast({ title: "请前往APP端进行下单", icon: "none" });
				return;
				// #endif
			},
		},
	};
</script>

<style>
	.header,
	.nav-bar {
		box-sizing: content-box;
		padding-top: var(--status-bar-height);
		background: linear-gradient(90deg, #8ec5fc, #4388e7);
	}
	.header {
		z-index: 0;
		height: 210rpx;
		border-bottom-right-radius: 20%;
		border-bottom-left-radius: 20%;
	}

	.nav-bar {
		z-index: 9;
	}

	.main {
		z-index: 1;
		margin-top: -88rpx;
		margin-bottom: 130rpx;
		padding: 0 30rpx;
	}

	.example-station {
		width: 140rpx;
		height: 140rpx;
	}

	.section {
		box-shadow: 0 5rpx 20rpx 0 rgba(151, 166, 192, 0.22);
		border-radius: 10rpx;
	}

	.city,
	.range {
		border-width: 1rpx;
		border-style: solid;
		padding: 4rpx 8rpx;
		border-radius: 4px;
	}

	.city {
		border-color: #4371ff;
		color: #4371ff;
	}

	.range {
		border-color: #c44dff;
		color: #c44dff;
	}

	.code-box {
		border-bottom: 1rpx solid #ebebeb;
	}

	.cell.th {
		border-bottom: 1rpx solid #e6e6e6;
	}

	.height-400 {
		height: 400rpx;
	}
	.icons {
		width: 150rpx;
	}
	.step {
		z-index: 1;
	}
	.comfirm {
		background: linear-gradient(90deg, #8ec5fc, #4388e7);
	}
	.title {
		display: inline-block;
	}
	.title text {
		display: inline;
	}
</style>
